// 自己封装的工具函数

// 获取url参数
function getQueryString(url,key){
    var reg = new RegExp('[\?&]'+key+'=([^&=]*)','g');
    reg.test(url);
    return RegExp.$1;
}

// 生成 [min-max] 的随机整数
function randomInt(min,max){
    return Math.round(Math.random()*(max-min))+min;
}

// 生成16进制随机颜色值
function randomColor(){
    var color = '#';
    var str = '0123456789abcdef';
    for (var i = 0; i < 6; i++){
        var index = randomInt(0,15);// 生成0-15的随机整数
        color += str[index];
    }
    return color;
}

// 生成x位随机验证码
function randomCode(x){
    // 设置x的默认值
    x = x || 6;
    // ASCII码值范围：48-122（除了58-64和91-96这两个范围）
    var code = '';
    for (var i = 0; i < x; i++) {
        do {
            var ascii = randomInt(48,122);// 生成48-122的随机整数
        } while((ascii >= 58 && ascii <= 64) || (ascii >= 91 && ascii <= 96));
        code += String.fromCharCode(ascii);
    }
    return code;
}

// 获取元素的函数
function $(selector){
    var dom = document.querySelectorAll(selector);
    if (dom.length === 1) {
        // 返回单个元素
        return dom[0];
    } else {
        // 返回元素集合
        return dom;
    }
}

// 获取元素到页面左侧和顶部的距离
function offset(dom){
    // dom -> box3
    var left = 0 - dom.clientLeft;// 累加左侧的距离
    var top = 0 - dom.clientTop;// 累加顶部的距离
    while(dom){// dom -> box3 -> box2 -> box1 -> body -> null
        left += dom.clientLeft + dom.offsetLeft
        top += dom.clientTop + dom.offsetTop
        dom = dom.offsetParent;
    }
    return {'left':left,'top':top}
}

/**
 * 运动函数：animate
 * 
 * 参数说明：
 * dom 要运动的元素节点
 * attr 要运动的属性
 * target 运动的目标位置
 * callback 运动完成之后执行的回调函数，可选参数
 * 
 * 功能说明：
 * 1.支持带px单位的属性运动（left top right bottom width margin...）
 * 2.支持滚动条属性运动（scrollLeft scrollTop）
 * 3.支持透明度属性运动（opacity）
 */
 function animate(dom,attr,target,callback){
    // 根据不同属性获取当前值
    if (attr === 'opacity') {
        // 当前值和目标位置乘以100
        var current = getComputedStyle(dom)[attr] * 100;
        target = target * 100;
    }
    else if (attr === 'scrollLeft' || attr === 'scrollTop'){
        var current = dom[attr];
    }
    else {
        // 其他带px单位的属性
        var current = parseInt( getComputedStyle(dom)[attr] );// '50px' -> 50
    }

    // 启动计时器之前先清除
    clearInterval(dom.timer);
    dom.timer = setInterval(function (){
        // 生成持续变化的速度
        var speed = (target-current)/10;
        // 对speed取整（正数向上取整，负数向下取整）
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        // 当前值累加speed
        current += speed;

        // 判断是否到达目标位置（剩余运动量<=每次的运动量）
        if (Math.abs(target-current) <= Math.abs(speed)) {
            // 到达目标位置
            if (attr === 'opacity') {
                dom.style[attr] = target/100;
            }
            else if (attr === 'scrollLeft' || attr === 'scrollTop'){
                dom[attr] = target;
            }
            else {
                dom.style[attr] = target + 'px';
            }
            // 清除计时器
            clearInterval(dom.timer);
            console.log( '到达目标位置。。。' );
            typeof callback === 'function' && callback();
        } else {
            // 未到达目标位置
            if (attr === 'opacity') {
                dom.style[attr] = current/100;
            }
            else if (attr === 'scrollLeft' || attr === 'scrollTop'){
                dom[attr] = current;
            }
            else {
                dom.style[attr] = current + 'px';
            }
        }
    },20);
}

// 设置cookie
function setCookie(options){
    // 对options解构赋值
    let {key,val,exp='',path='',domain=''} = options;

    let d = '';
    // 判断是否设置有效期
    if (exp) {
        d = new Date();
        d.setMinutes(d.getMinutes() + exp);
    }
    // 设置cookie
    document.cookie = `${key}=${val}; domain=${domain}; path=${path}; expires=${d}`;
}

// 获取cookie
function getCookie(key){
    // 获取所有的cookie数据
    let str = document.cookie;
    // 将str分割成数组
    let arr = str.split('; ');
    // 遍历数组
    for (var i = 0; i < arr.length; i++) {
        // 分割每一个元素
        let arr2 = arr[i].split('=');
        // 判断arr2当前元素的第一个值是否等于key
        if (arr2[0] === key) {
            return arr2[1];
        }
    }
    return null;
}

// 删除cookie
function rmCookie(key){
    // cookie过期会自动删除
    setCookie({
        key: key,
        val: '123',
        exp: -60 * 24
    });
}

// ajax封装
function ajax(option){
    return new Promise((resolve,reject)=>{    
        // 解构参数
        let {type,url,data='',timeout=0,cache=true,dataType='text'} = option

        // 1.创建一个数据交互对象
        let xhr = new XMLHttpRequest()

        ajax.xhr = xhr

        // 设置超时
        xhr.timeout = timeout

        // 判断data是否为对象
        // console.log( Object.prototype.toString.call({}) )// '[object Object]'
        // console.log( Object.prototype.toString.call([]) )// '[object Array]'
        if (Object.prototype.toString.call(data) === '[object Object]') {
            // data是对象，格式化为查询字符串
            let tmp = ''
            for (let key in data){
                tmp += key+'='+data[key]+'&'
            }
            // console.log( tmp )// 'a=1&b=2&'
            data = tmp.substr(0,tmp.length-1)// 去掉最后的'&'
        }

        // 判断请求方式
        if (type.toLowerCase() === 'get') {
            if (cache) {
                // 2.初始化请求（设置请求地址、请求方式等）
                xhr.open(type,url+'?'+data,true)
            } else {
                // 2.初始化请求（设置请求地址、请求方式等）
                xhr.open(type,url+'?'+data+'&_='+Date.now(),true)
            }
            // 3.将请求发送到服务端
            xhr.send(null)
        }
        else if (type.toLowerCase() === 'post'){
            // 2.初始化请求（设置请求地址、请求方式等）
            xhr.open(type,url)

            // 3.设置请求头（告诉服务端发送的数据格式）
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

            // 4.将请求发送到服务端
            xhr.send(data)
        }
        else{
            alert('亲，目前只支持get和post请求')
            return
        }

        // 5.等待 请求 状态改变
        xhr.onreadystatechange = function (){
            if (xhr.readyState === 4) {// 请求完成
                if (xhr.status >= 200 && xhr.status < 300) {
                    if (dataType === 'json') {
                        let json = JSON.parse(xhr.responseText)// 解析成json对象
                        // success(json)// 执行成功的回调
                        resolve(json)
                    }
                    else if (dataType === 'xml'){
                        // success(xhr.responseXML)// 执行成功的回调
                        resolve(xhr.responseXML)
                    }
                    else{
                        // success(xhr.responseText)// 执行成功的回调
                        resolve(xhr.responseText)
                    }
                } else {
                    // error(xhr.status)// 执行失败的回调
                    reject(xhr.status)
                }
            }
        }
    })
}
